<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="../components/AdminLTE/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../components/AdminLTE/dist/css/skins/_all-skins.min.css">


    <!-- iCheck -->
    <link rel="stylesheet" href="../components/AdminLTE/plugins/iCheck/flat/blue.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="../components/AdminLTE/plugins/iCheck/all.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="../components/AdminLTE/plugins/datatables/dataTables.bootstrap.css">


    <!-- Theme style -->
    <link rel="stylesheet" href="../components/AdminLTE/dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="index2.html" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>A</b>LT</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>Admin</b>LTE</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>

        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <ul class="sidebar-menu">
                <li class="header">MAIN NAVIGATION</li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Dashboard
                <small>Control panel</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                <li class="active">Dashboard</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">

                <section class="col-md-12">

                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">添加产品</h3>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <form class="J-chkForm form-horizontal">
                            <div class="box-body">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品名称</label>
                                    <div class="J-type col-sm-10">
                                        <input type="text" class="form-control" placeholder="请填写产品名称" required>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">产品类型</label>
                                    <div class="J-type col-sm-10">
                                        <select name="type" id="J-proType" class="form-control" required>
                                            <option value="">请选择</option>
                                            <option value="1">护肤美妆</option>
                                            <option value="2">电子产品</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="J-checks">

                                </div>

                                <div class="form-group">
                                    <label class="sr-only col-sm-2 control-label">绑定商品</label>
                                    <div class="col-sm-10">
                                        <!-- /.box-header -->
                                        <div id="productBox" class="box-body"></div>
                                        <!-- /.box-body -->

                                        <template class="J-tableTpl">
                                            <table class="table table-bordered table-striped-">
                                                <thead></thead>
                                                <tbody></tbody>
                                                <tfoot></tfoot>
                                            </table>
                                        </template>

                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <button type="button" class="btn btn-default">取消</button>
                                <button type="button" class="J-submit btn btn-info pull-right">确定</button>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>


                </section>

                <!--<section class="col-md-6">
                    <div class="box box-info">
                        <div class="box-header">
                            <h3 class="box-title">产品分类表</h3>
                        </div>
                        &lt;!&ndash; /.box-header &ndash;&gt;
                        <div id="productBox" class="box-body"></div>
                        &lt;!&ndash; /.box-body &ndash;&gt;

                        <template class="J-tableTpl">
                            <table class="table table-bordered table-striped-">
                                <thead></thead>
                                <tbody></tbody>
                                <tfoot></tfoot>
                            </table>
                        </template>

                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="exampleModalLabel">绑定商品</h4>
                                    </div>
                                    <div class="modal-body">

                                        <div class="row">
                                            <div class="col-xs-12">
                                                <div class="box box-primary">
                                                    <div class="box-header">
                                                        <h3 class="box-title">属性组合</h3>
                                                    </div>

                                                    <div class="box-body table-responsive">
                                                        <table class="info-table table"></table>
                                                    </div>
                                                </div>


                                                <div class="box box-primary ">
                                                    <div class="box-body table-responsive">

                                                        <form method="GET" action="http://www.afuyigou.app/admin/goods" accept-charset="UTF-8" class="form-search form-inline pull-right">
                                                            <div class="form-group" style="margin-right: 15px;">
                                                                <select name="cat_id" class="form-control select2" id="cat_id">
                                                                    <option value="0" selected="selected">所有商品分类</option>
                                                                    <option value="3" disabled="disabled">&nbsp;&nbsp;├美妆个护</option>
                                                                    <option value="397" disabled="disabled">&nbsp;&nbsp;&nbsp;&nbsp;├香水/香氛</option>
                                                                    <option value="398">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└女士香水</option>
                                                                    <option value="399">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└男士香水</option>
                                                                    <option value="400">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└中性香水</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group" style="margin-right: 15px;">
                                                                <select class="form-control select2">
                                                                    <option value="0" selected="selected">选择品牌</option>
                                                                    <option value="4">PARCIMONIE</option>
                                                                    <option value="5">S Miracle</option>
                                                                    <option value="6">爱琳丝东方草本</option>
                                                                    <option value="7">韩国品牌</option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group" style="margin-right: 15px;">
                                                                <select class="form-control" placeholder="商品类型" name="type"><option value="-1">选择类型</option><option value="0">一般商品</option><option value="1" selected="selected">e贸易商品</option></select>
                                                            </div>
                                                            <div class="form-group" style="margin-right: 15px;">
                                                                <input class="form-control" placeholder="商品名称" name="goods_name" type="text" value="">
                                                            </div>
                                                            <div class="form-group" style="margin-right: 15px;">
                                                                <input class="form-control" placeholder="商品编码" name="goods_sn" type="text" value="">
                                                            </div>
                                                            <div class="form-group">
                                                                <button type="submit" class="btn btn-primary ">搜索</button>
                                                                <button type="button" onclick="window.location.href='/admin/goods'" class="btn btn-default">重置</button>

                                                            </div>
                                                        </form>

                                                    </div>

                                                </div>&lt;!&ndash; end .box box-primary &ndash;&gt;


                                                <div class="box box-primary">
                                                    <div class="box-header">
                                                        <h3 class="box-title">商品列表</h3>
                                                    </div>
                                                    &lt;!&ndash; /.box-header &ndash;&gt;

                                                    <div class="box-body table-responsive no-padding">


                                                        <table class="table table-hover">
                                                            <tbody><tr>
                                                                <th style="width: 80px">ID</th>
                                                                <th style="width: 150px">货号</th>
                                                                <th style="width: 200px">名称</th>
                                                                <th style="width: 150px">分类</th>
                                                                <th style="width: 80px">价格</th>
                                                                <th style="width: 80px">库存</th>
                                                                <th style="width: 80px">类型</th>
                                                                <th style="width: 80px;">操作</th>
                                                            </tr>

                                                            <tr>
                                                                <td>1342</td>
                                                                <td>SN-5616515464</td>
                                                                <td>宝马</td>
                                                                <td>平行进口车</td>
                                                                <td>22.00万</td>
                                                                <td>10辆</td>
                                                                <td>e贸易商品</td>
                                                                <td>
                                                                    <button data-id="123456" data-name="宝马" type="button" class="J-ok btn  btn-success btn-xs"><i class="icon  glyphicon glyphicon-link"></i> 绑定该商品</button>
                                                                </td>
                                                            </tr>

                                                            </tbody>
                                                        </table>

                                                    </div>
                                                    &lt;!&ndash; /.box-body &ndash;&gt;


                                                </div>
                                                &lt;!&ndash; /.box &ndash;&gt;

                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="delModal" class="modal fade">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span></button>
                                        <h4 class="modal-title">提示</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>确定要删除吗？</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                                        <button type="button" class="J-ok btn btn-warning">确定</button>
                                    </div>
                                </div>
                                &lt;!&ndash; /.modal-content &ndash;&gt;
                            </div>
                            &lt;!&ndash; /.modal-dialog &ndash;&gt;
                        </div>


                    </div>
                    &lt;!&ndash; /.box &ndash;&gt;
                </section>-->

            </div>
            <!-- /.row (main row) -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->



    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.3.2
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
        reserved.
    </footer>

</div>
<!-- ./wrapper -->

<!-- jQuery 2.1.4 -->
<script src="../components/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!-- Bootstrap 3.3.5 -->
<script src="../components/AdminLTE/bootstrap/js/bootstrap.min.js"></script>

<!-- DataTables -->
<script src="../components/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../components/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../components/AdminLTE/plugins/fastclick/fastclick.js"></script>

<!-- iCheck 1.0.1 -->
<script src="../components/AdminLTE/plugins/iCheck/icheck.min.js"></script>

<!-- AdminLTE App -->
<script src="../components/AdminLTE/dist/js/app.min.js"></script>
<script src="../js/tools.js"></script>

<template id="groupTpl">
    <div class="form-group">
        <label class="col-sm-2 control-label">${name}</label>
        <div class="J-params col-sm-10" data-name="${name}" data-id="${id}">
            ${checkHtml}
        </div>
    </div>
</template>
<template id="checkTpl">
    <div class="checkbox-inline">
        <label>
            <input type="checkbox" data-id="${id}" class="minimal">
            ${name}
        </label>
    </div>
</template>

<script>
    var proData = {
        1: [
            {
                id: 1,
                name: '颜色',
                value: [
                    {id: 1, name: '白色'},
                    {id: 2, name: '粉色'},
                    {id: 3, name: '黑色'},
                    {id: 4, name: '红色'}
                ]
            },
            {
                id: 2,
                name: '容量',
                value: [
                    {id: 1, name: '50ml'},
                    {id: 2, name: '60ml'},
                    {id: 3, name: '150ml'},
                    {id: 4, name: '300ml'}
                ]
            },
            {
                id: 3,
                name: '优惠',
                value: [
                    {id: 1, name: '满50减10'},
                    {id: 2, name: '满150减30'}
                ]
            }
        ],
        2: [
            {
                id: 1,
                name: '颜色',
                value: [
                    {id: 1, name: '雪晶白'},
                    {id: 1, name: '太空灰'},
                    {id: 3, name: '曜石黑'},
                    {id: 4, name: '玫瑰金'}
                ]
            },
            {
                id: 2,
                name: '内存',
                value: [
                    {id: 1, name: '16G'},
                    {id: 1, name: '32G'},
                    {id: 3, name: '64G'},
                    {id: 4, name: '128G'}
                ]
            },
            {
                id: 3,
                name: '尺寸',
                value: [
                    {id: 1, name: '4吋'},
                    {id: 1, name: '4.7吋'},
                    {id: 3, name: '5吋'},
                    {id: 4, name: '6吋'}
                ]
            },
            {
                id: 4,
                name: '网络',
                value: [
                    {id: 1, name: '移动'},
                    {id: 1, name: '联通'},
                    {id: 3, name: '双4G'},
                    {id: 4, name: '全网通'}
                ]
            }
        ]
    };
    //todo 根据类型生成checkbox
    var proType = $('#J-proType');
    proType.on('change', function () {
        var groupTpl = $('#groupTpl').html(),
                checkTpl = $('#checkTpl').html(),
                groupArr = [];
        var checkWrap = $('.J-checks');
        var id = proType.val();

        //todo ajax获取属性数据
        if (typeof proData[id] == 'undefined') return false;
        var curData = proData[id];


        for (var i = 0; i < curData.length; i++) {
            var curType = curData[i], checkHtml = [];
            for (var j = 0; j < curType.value.length; j++) {
                checkHtml.push(tools.htmlTemplate(checkTpl, curType.value[j]));
            }
            groupArr.push(tools.htmlTemplate(groupTpl, $.extend(true, {}, curType, {checkHtml: checkHtml.join('')})));

        }

        checkWrap.html(groupArr.join(''));

        initICheck();

    });

    //icheck 插件
    function initICheck() {

        var checks = $('input[type="checkbox"].minimal, input[type="radio"].minimal');
        checks.iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });

        checks.on('ifChanged',function(){
            var pro = new Products();
            pro.makeTable();
        });
    }

    //提交表单
    $('.J-chkForm').on('click', '.J-submit', function () {
        //todo 表单验证提交
        return false;
    });

    //生成产品table
    function Products() {
        var This = this;
        var productBox = $('#productBox');
        var table = $($('.J-tableTpl').html()).clone();
        var params = $('.J-params');
        var options = {
            "language": {
                "paginate": {
                    "first": "首页",
                    "last": "尾页",
                    "next": "下一页",
                    "previous": "上一页"

                },
                "emptyTable": "表中无数据",
                "search": "搜索:",
                "info": "_PAGE_/_PAGES_",
                "infoEmpty": "表中无属性",
                "searchPlaceholder": "输入关键字",
                "zeroRecords": "没有可显示记录",
                "lengthMenu": '每页显示 <select>' +
                '<option value="10">10</option>' +
                '<option value="20">20</option>' +
                '<option value="30">30</option>' +
                '<option value="40">40</option>' +
                '<option value="50">50</option>' +
                '<option value="-1">全部</option>' +
                '</select> 条记录'
            }
        };

        var selParams = [];
        var selParamsVal = [];

        //清除历史数据
        this.clear = function () {
            selParams = [];
            selParamsVal = [];
            productBox.empty();
        };

        //获取选中数据
        this.makeData = function () {
            This.clear();
            params.has(':checked').each(function () {
                var that = $(this), pId = that.data('id'), pName = that.data('name'), cArr = [];
                var checkedItems = that.find(':checked');

                for (var i = 0; i < checkedItems.length; i++) {
                    var curItem = checkedItems.eq(i);
                    cArr.push({id: curItem.data('id'), name: curItem.closest('label').text()});
                }

                selParams.push({id: pId, name: pName});
                selParamsVal.push(cArr);
            });
        };

        //绑定table中的事件
        this.bind = function () {
            var delTip = $('#delModal');
            var goodsTip = $('#exampleModal');

            //删除提示中的确定按钮事件
            delTip.find('.J-ok').on('click', function () {
                var tr = delTip.data('tr');
                tr.remove();
                delTip.modal('hide');
            });

            //商品弹出框中的绑定事件
            goodsTip.find('.J-ok').on('click', function () {
                //绑定商品
                var tr = goodsTip.data('tr');
                var goods = $(this), id = goods.data('id'), name = goods.data('name');

                tr.find('.J-link').data('id', id).text(name).css('display', 'inline');
                goodsTip.modal('hide');

                //todo 请求后台保存当前产品
                $.ajax({});
            });


            //删除按钮
            productBox.on('click', '.J-del', function () {

                var tr = $(this).closest('tr');

                delTip.data('tr', tr);
                delTip.modal();
            });

            //绑定按钮
            productBox.on('click', '.J-bind', function () {
                var tr = $(this).closest('tr');
                goodsTip.off('shown.bs.modal').on('shown.bs.modal', function (e) {

                });
                goodsTip.data('tr', tr);


                //弹出框中显示当前点击的组合信息
                var info = tr.clone();
                info.find('.J-opts').remove();
                goodsTip.find('.info-table').html(info.html());

                //初始化
                goodsTip.modal();

                //备注，记得删除
                goodsTip.on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget); // Button that triggered the modal
                    var modal = $(this);// the modal
                });
            });
        };

        //渲染table
        this.makeTable = function () {
            This.makeData();//获取数据

            var th = [], thead, tbody, rowNum = 1;
            /*var optsHtml = '<td class="J-opts">' +
                    '<button type="button" class="J-bind btn btn-primary btn-xs" title="绑定商品" style="margin-right: 6px;"><i class="icon glyphicon glyphicon-link"></i></button>' +
                    '<button type="button" class="J-del btn btn-warning btn-xs" title="删除" style="margin-right: 6px;"><i class="icon glyphicon glyphicon-remove"></i></button>' +
                    '<button type="button" class="J-link btn btn-primary btn-xs" title="已绑定商品" style="display: none;"></button>' +
                    '</td>';*/
            var optsHtml = '<td class="J-opts form-horizontal">'
                        +'<input type="text" class="form-control input-sm" required>'
                        +'</td>';

            if (selParams.length == 0) return false;

            //表头
            for (var i = 0; i < selParams.length; i++) {
                th.push('<th data-id="' + selParams[i].id + '">' + selParams[i].name + '</th>');//生成表头
                rowNum *= selParamsVal[i].length;//总排列组合数
            }
            thead = '<tr>' + th.join('') + '<th>绑定商品ID</th></tr>';
            table.find('thead').html(thead);

            console.log('总行数：', rowNum);

            //生成列表中的行
            //首先将每个行对应td定义成一个空数组，后面要用
            var trs = [], singleRowNum = 1, oldRow = 1;
            for (var j = 0; j < rowNum; j++) {
                trs[j] = [];
            }

            //
            // 循环生产td标签（不限制属性个数，不限制属性值个数，但是不要太多，最终生成的table行数会成数量级增加，对此我表示很无奈）
            // 这块有点绕
            // 1层循环属性类型；
            // 2层循环历史循环（本次循环的前一次）对应属性类型所占据的行数（此循环生成oldSide的值，在第三层循环中用来确定特定属性值循环显示的起始位置）；
            // 3层循环特定属性对应的值数组的长度 以此来确定该属性值显示的起始行数（1列对应1个特定属性，该属性的所有值在此列显示，一行代表一个SKU）
            // 4层按照3层确定的起始行生产td标签
            //
            for (var k = 0; k < selParams.length; k++) {
                var cur = selParamsVal[k];

                singleRowNum = singleRowNum * cur.length;//当前单个属性重复行数
                for (var b = 0; b < oldRow; b++) {
                    var oldSide = b * rowNum / oldRow;
//console.log('oldSide：'+oldSide);

                    for (var a = 0; a < cur.length; a++) {
                        var startNum = oldSide + a * rowNum / singleRowNum;
                        var endNum = startNum + rowNum / singleRowNum;
                        var item = cur[a];
//console.log('开始：'+startNum,'结束：'+endNum);

                        /*for (var c = startNum; c < endNum; c++) {
                            trs[c].push('<td data-id="' + item.id + '">' + item.name + '</td>');
                        }*/

                        for (var c = startNum; c < endNum; c++) {
                            if(rowNum / singleRowNum>1){
                                trs[c].push('<td rowspan="'+rowNum / singleRowNum+'" data-id="' + item.id + '">' + item.name + '</td>');
                                break;
                            }else{
                                trs[c].push('<td data-id="' + item.id + '">' + item.name + '</td>');
                            }
                        }

                    }
                }

                oldRow = singleRowNum;
            }

            //生成tr结构
            for (var d = 0; d < rowNum; d++) {
                trs[d].unshift('<tr>');
                trs[d].push(optsHtml);
                trs[d].push('</tr>');
                trs[d].join('');
            }
            table.find('tbody').html(trs.join(''));
            productBox.empty().append(table);
//console.log('列表：',trs);

            //实例化表格
            //table.DataTable(options);

            //绑定列表事件
            This.bind();
        };

    }
</script>
</body>
</html>
